<template>
  <div class="card">
    <div class="flex pt-21px px-15px justify-between items-center">
      <div class="text-#3477E9 font-16px lh-16px flex-1 truncate mr-6px font-700">电商直播管理员</div>
      <span class="text-16px lh-16px text-#D20808">10K-15K</span>
    </div>
    <div class="flex mt-12px px-15px group">
      <div
        class="last:mr-0 mr-9px max-w-85px truncate bg-#f5f5f5 h-22px lh-22px px-10px text-12px rounded-2px text-#757575 text-center"
        v-for="item in 4"
        :key="item"
      >
        大专及以上大专及以上
      </div>
    </div>
    <div class="h-75px mt-12px card-bottom px-12px py-16px flex">
      <div class="w-40px h-40px">
        <img src="" alt="" class="w-full h-full" />
      </div>
      <div class="flex-1 ml-8px">
        <div class="truncate text-#222 text-14px lh-14px">杭州有个电商股份有限公司</div>
        <div class="text-#757575 text-12px lh-14px mt-10px">300 - 500人 ｜ 电子商务</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  box-shadow: 0 1px 10px 0 #d0cbcc80;
  @apply rounded-8px bg-white flex-1 min-w-[30%] overflow-hidden;
}
.card-bottom {
  background: url(../../assets/images/position-item-bg@2x.png) no-repeat;
  background-size: 100% 100%;
}
</style>
